<template>
  <div class="min-h-screen bg-gray-50">
    <!-- 主要内容区域 -->
    <div class="p-6 max-w-7xl mx-auto w-full">
    <!-- 统计数据卡片区域 -->
    <div class="mb-6">
      <div class="flex items-center justify-between space-x-8 bg-white rounded-xl shadow-sm border border-gray-200 px-12 py-8 w-full">
        <el-skeleton :loading="loading" animated>
          <template #default>
            <div class="flex items-center space-x-12 w-full">
              <!-- 今日流水 -->
              <div class="flex items-center space-x-4 flex-1 min-w-0">
                <div class="w-14 h-14 bg-blue-100 rounded-full flex items-center justify-center flex-shrink-0">
                  <Icon icon="ep:money" class="text-blue-600 text-2xl" />
                </div>
                <div class="flex-1">
                  <div class="text-sm text-gray-500 mb-2">今日流水</div>
                  <CountTo
                    class="text-2xl font-bold text-gray-900"
                    :start-val="0"
                    :end-val="totalSate.project"
                    :duration="2600"
                  />
                </div>
              </div>
              
              <!-- 分隔线 -->
              <div class="w-px h-16 bg-gray-200 flex-shrink-0"></div>
              
              <!-- 今日订单 -->
              <div class="flex items-center space-x-4 flex-1 min-w-0">
                <div class="w-14 h-14 bg-green-100 rounded-full flex items-center justify-center flex-shrink-0">
                  <Icon icon="ep:document" class="text-green-600 text-2xl" />
                </div>
                <div class="flex-1">
                  <div class="text-sm text-gray-500 mb-2">今日订单</div>
                  <CountTo
                    class="text-2xl font-bold text-gray-900"
                    :start-val="0"
                    :end-val="totalSate.todo"
                    :duration="2600"
                  />
                </div>
              </div>
              
              <!-- 分隔线 -->
              <div class="w-px h-16 bg-gray-200 flex-shrink-0"></div>
              
              <!-- 今日营业 -->
              <div class="flex items-center space-x-4 flex-1 min-w-0">
                <div class="w-14 h-14 bg-orange-100 rounded-full flex items-center justify-center flex-shrink-0">
                  <Icon icon="ep:shop" class="text-orange-600 text-2xl" />
                </div>
                <div class="flex-1">
                  <div class="text-sm text-gray-500 mb-2">今日营业</div>
                  <CountTo
                    class="text-2xl font-bold text-gray-900"
                    :start-val="0"
                    :end-val="totalSate.access"
                    :duration="2600"
                  />
                </div>
              </div>
              
              <!-- 分隔线 -->
              <div class="w-px h-16 bg-gray-200 flex-shrink-0"></div>
              
              <!-- 今日报警 -->
              <div class="flex items-center space-x-4 flex-1 min-w-0">
                <div class="w-14 h-14 bg-red-100 rounded-full flex items-center justify-center flex-shrink-0">
                  <Icon icon="ep:warning" class="text-red-600 text-2xl" />
                </div>
                <div class="flex-1">
                  <div class="text-sm text-gray-500 mb-2">今日报警</div>
                  <CountTo
                    class="text-2xl font-bold text-gray-900"
                    :start-val="0"
                    :end-val="totalSate.project"
                    :duration="2600"
                  />
                </div>
              </div>
            </div>
          </template>
        </el-skeleton>
      </div>
    </div>

  <el-row class="mt-8px" :gutter="8" justify="space-between">
    <el-col :xl="16" :lg="16" :md="24" :sm="24" :xs="24" class="mb-8px">
      <el-card shadow="hover" class="bg-white border border-gray-200 rounded-xl">
        <template #header>
          <div class="h-3 flex justify-between">
            <span class="text-base font-medium">功能模块</span>
            <el-link
              type="primary"
              :underline="false"
              href="https://github.com/yudaocode"
              target="_blank"
            >
              查看更多
            </el-link>
          </div>
        </template>
        <el-skeleton :loading="loading" animated>
          <div class="grid grid-cols-6 gap-3 py-2">
            <div
              v-for="(item, index) in rideProjects"
              :key="`card-${index}`"
              class="cursor-pointer bg-gray-50 hover:bg-blue-50 border border-transparent hover:border-blue-200 rounded-lg transition-all duration-300 p-3 flex flex-col items-center justify-center min-h-[80px]"
              @click="handleProjectClick(item.message)"
            >
              <Icon
                :icon="item.icon"
                :size="18"
                class="mb-1"
                :style="{ color: item.color }"
              />
              <span class="text-11px text-gray-600 text-center leading-tight">{{ item.name }}</span>
            </div>
          </div>
        </el-skeleton>
      </el-card>

      <el-card shadow="hover" class="mt-2 bg-white border border-gray-200 rounded-xl">
        <template #header>
          <div class="flex justify-between items-center">
            <span class="text-lg font-semibold text-gray-800">数据统计</span>
            <el-link type="primary" :underline="false">查看详情</el-link>
          </div>
        </template>
        <el-skeleton :loading="loading" animated>
          <el-row :gutter="24" justify="space-between">
            <el-col :xl="10" :lg="10" :md="24" :sm="24" :xs="24">
              <el-card shadow="hover" class="mb-4 bg-gradient-to-br from-blue-50 to-indigo-50 border border-blue-100 rounded-xl">
                <template #header>
                  <div class="text-center">
                    <span class="text-base font-medium text-blue-700">用户来源分析</span>
                  </div>
                </template>
                <el-skeleton :loading="loading" animated>
                  <Echart :options="pieOptionsData" :height="280" />
                </el-skeleton>
              </el-card>
            </el-col>
            <el-col :xl="14" :lg="14" :md="24" :sm="24" :xs="24">
              <el-card shadow="hover" class="mb-4 bg-gradient-to-br from-green-50 to-emerald-50 border border-green-100 rounded-xl">
                <template #header>
                  <div class="text-center">
                    <span class="text-base font-medium text-green-700">周活跃量趋势</span>
                  </div>
                </template>
                <el-skeleton :loading="loading" animated>
                  <Echart :options="barOptionsData" :height="280" />
                </el-skeleton>
              </el-card>
            </el-col>
          </el-row>
        </el-skeleton>
      </el-card>
    </el-col>
    <el-col :xl="8" :lg="8" :md="24" :sm="24" :xs="24" class="mb-8px">
      <el-card shadow="hover" class="bg-white border border-gray-200 rounded-xl">
        <template #header>
          <div class="flex justify-between items-center">
            <span class="text-lg font-semibold text-gray-800">系统状态监控</span>
            <el-link type="primary" :underline="false">查看详情</el-link>
          </div>
        </template>
        <el-skeleton :loading="loading" animated>
          <div class="space-y-4">
            <!-- 服务器状态 -->
            <div class="flex items-center justify-between p-4 bg-green-50 rounded-lg border border-green-200">
              <div class="flex items-center space-x-3">
                <div class="w-3 h-3 bg-green-500 rounded-full animate-pulse"></div>
                <div>
                  <div class="text-sm font-medium text-gray-800">服务器状态</div>
                  <div class="text-xs text-gray-500">运行正常</div>
                </div>
              </div>
              <div class="text-right">
                <div class="text-sm font-semibold text-green-600">99.9%</div>
                <div class="text-xs text-gray-500">可用性</div>
              </div>
            </div>
            
            <!-- 数据库连接 -->
            <div class="flex items-center justify-between p-4 bg-blue-50 rounded-lg border border-blue-200">
              <div class="flex items-center space-x-3">
                <div class="w-3 h-3 bg-blue-500 rounded-full animate-pulse"></div>
                <div>
                  <div class="text-sm font-medium text-gray-800">数据库连接</div>
                  <div class="text-xs text-gray-500">连接稳定</div>
                </div>
              </div>
              <div class="text-right">
                <div class="text-sm font-semibold text-blue-600">{{ systemStatus.dbConnections }}</div>
                <div class="text-xs text-gray-500">活跃连接</div>
              </div>
            </div>
            
            <!-- 内存使用率 -->
            <div class="flex items-center justify-between p-4 bg-orange-50 rounded-lg border border-orange-200">
              <div class="flex items-center space-x-3">
                <div class="w-3 h-3 bg-orange-500 rounded-full"></div>
                <div>
                  <div class="text-sm font-medium text-gray-800">内存使用率</div>
                  <div class="text-xs text-gray-500">当前负载</div>
                </div>
              </div>
              <div class="text-right">
                <div class="text-sm font-semibold text-orange-600">{{ systemStatus.memoryUsage }}%</div>
                <div class="text-xs text-gray-500">已使用</div>
              </div>
            </div>
            
            <!-- 在线用户 -->
            <div class="flex items-center justify-between p-4 bg-purple-50 rounded-lg border border-purple-200">
              <div class="flex items-center space-x-3">
                <div class="w-3 h-3 bg-purple-500 rounded-full animate-pulse"></div>
                <div>
                  <div class="text-sm font-medium text-gray-800">在线用户</div>
                  <div class="text-xs text-gray-500">实时统计</div>
                </div>
              </div>
              <div class="text-right">
                <div class="text-sm font-semibold text-purple-600">{{ systemStatus.onlineUsers }}</div>
                <div class="text-xs text-gray-500">当前在线</div>
              </div>
            </div>
          </div>
        </el-skeleton>
      </el-card>
      <el-card shadow="hover" class="mt-4 bg-white border border-gray-200 rounded-xl">
        <template #header>
          <div class="flex justify-between items-center">
            <span class="text-lg font-semibold text-gray-800">{{ t('workplace.notice') }}</span>
            <el-link type="primary" :underline="false">{{ t('workplace.more') }}</el-link>
          </div>
        </template>
        <el-skeleton :loading="loading" animated>
          <div class="space-y-3">
            <div
              v-for="(item, index) in notice"
              :key="`dynamics-${index}`"
              class="flex items-start p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors duration-200 cursor-pointer"
            >
              <div class="flex-shrink-0 w-3 h-3 bg-gradient-to-r from-blue-500 to-blue-600 rounded-full mr-3 mt-1"></div>
              <div class="flex-1 min-w-0">
                <div class="text-sm text-gray-800 font-medium mb-1 truncate">
                  <Highlight :keys="item.keys.map((v) => t(v))">
                    {{ item.type }} : {{ item.title }}
                  </Highlight>
                </div>
                <div class="text-xs text-gray-500">
                  {{ formatTime(item.date, 'yyyy-MM-dd') }}
                </div>
              </div>
              <Icon icon="ep:arrow-right" class="text-gray-400 text-sm ml-2 mt-1" />
            </div>
          </div>
        </el-skeleton>
      </el-card>
    </el-col>
  </el-row>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { set } from 'lodash-es'
import { EChartsOption } from 'echarts'
import { formatTime } from '@/utils'

import { useUserStore } from '@/store/modules/user'
// import { useWatermark } from '@/hooks/web/useWatermark'
import type { WorkplaceTotal, Project, Notice } from './types'
import { pieOptions, barOptions } from './echarts-data'
import { useRouter } from 'vue-router'

defineOptions({ name: 'Index' })

const { t } = useI18n()
const router = useRouter()
const userStore = useUserStore()
// const { setWatermark } = useWatermark()
const loading = ref(true)
const avatar = userStore.getUser.avatar
const username = userStore.getUser.nickname
const pieOptionsData = reactive<any>({
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      type: 'pie',
      radius: '50%',
      data: [
        { value: 1256, name: '今日订单' },
        { value: 892, name: '活跃司机' },
        { value: 3420, name: '注册用户' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
})
// 获取统计数
let totalSate = reactive<WorkplaceTotal>({
  project: 0,
  access: 0,
  todo: 0
})

const getCount = async () => {
  const data = {
    project: 40,
    access: 2340,
    todo: 10
  }
  totalSate = Object.assign(totalSate, data)
}

// 获取项目数
let rideProjects = reactive<Project[]>([])
const getProject = async () => {
  const data = [
    {
      name: '订单管理',
      icon: 'ep:document',
      message: 'order-management',
      color: '#409EFF'
    },
    {
      name: '乘客管理',
      icon: 'ep:avatar',
      message: 'passenger-management',
      color: '#E6A23C'
    },
    {
      name: '车辆管理',
      icon: 'ep:van',
      message: 'vehicle-management',
      color: '#F56C6C'
    },
    {
      name: '路线规划',
      icon: 'ep:location',
      message: 'route-planning',
      color: '#909399'
    },
    {
      name: '司机管理',
      icon: 'ep:user',
      message: 'driver-management',
      color: '#67C23A'
    },
    {
      name: '收益统计',
      icon: 'ep:data-analysis',
      message: 'revenue-statistics',
      color: '#1890ff'
    }
  ]
  rideProjects = Object.assign(rideProjects, data)
}

// 获取通知公告
let notice = reactive<Notice[]>([])
const getNotice = async () => {
  const data = [
    {
      title: '系统升级：网约车平台智能调度系统已上线',
      type: '系统升级',
      keys: ['智能调度'],
      date: new Date('2024-01-15')
    },
    {
      title: '功能更新：新增实时路况监控功能',
      type: '功能更新',
      keys: ['路况监控'],
      date: new Date('2024-01-13')
    },
    {
      title: '维护通知：系统将于今晚2:00-4:00进行例行维护',
      type: '维护通知',
      keys: ['例行维护'],
      date: new Date('2024-01-12')
    }
  ]
  notice = Object.assign(notice, data)
}

// 获取系统状态
let systemStatus = reactive({
  dbConnections: 0,
  memoryUsage: 0,
  onlineUsers: 0
})

const getSystemStatus = async () => {
  const data = {
    dbConnections: 25,
    memoryUsage: 68,
    onlineUsers: 1247
  }
  systemStatus = Object.assign(systemStatus, data)
}

// 用户来源
const getUserAccessSource = async () => {
  const data = [
    { value: 335, name: 'analysis.directAccess' },
    { value: 310, name: 'analysis.mailMarketing' },
    { value: 234, name: 'analysis.allianceAdvertising' },
    { value: 135, name: 'analysis.videoAdvertising' },
    { value: 1548, name: 'analysis.searchEngines' }
  ]
  set(
    pieOptionsData,
    'legend.data',
    data.map((v) => t(v.name))
  )
  pieOptionsData!.series![0].data = data.map((v) => {
    return {
      name: t(v.name),
      value: v.value
    }
  })
}
const barOptionsData = reactive<EChartsOption>(barOptions) as EChartsOption

// 周活跃量
const getWeeklyUserActivity = async () => {
  const data = [
    { value: 13253, name: 'analysis.monday' },
    { value: 34235, name: 'analysis.tuesday' },
    { value: 26321, name: 'analysis.wednesday' },
    { value: 12340, name: 'analysis.thursday' },
    { value: 24643, name: 'analysis.friday' },
    { value: 1322, name: 'analysis.saturday' },
    { value: 1324, name: 'analysis.sunday' }
  ]
  set(
    barOptionsData,
    'xAxis.data',
    data.map((v) => t(v.name))
  )
  set(barOptionsData, 'series', [
    {
      name: t('analysis.activeQuantity'),
      data: data.map((v) => v.value),
      type: 'bar'
    }
  ])
}

const getAllApi = async () => {
  await Promise.all([
    getCount(),
    getProject(),
    getNotice(),
    getSystemStatus(),
    getUserAccessSource(),
    getWeeklyUserActivity()
  ])
  loading.value = false
}

const handleProjectClick = (message: string) => {
  // 根据不同的功能模块进行路由跳转
  switch (message) {
    case 'vehicle-management':
      // 跳转到车辆信息管理页面
      router.push('/ride/vehicle')
      break
    case 'order-management':
      router.push('/ride/order')
      break
    case 'passenger-management':
      router.push('/ride/passenger')
      break
    case 'driver-management':
      // 跳转到司机信息管理页面
      router.push('/driver/driver')
      break
    case 'route-planning':
      router.push('/ride/route')
      break
    case 'revenue-statistics':
      router.push('/ride/statistics')
      break
    default:
      // 如果没有匹配的路由，则打开外部链接
      window.open(`https://${message}`, '_blank')
  }
}



getAllApi()
</script>

<style scoped>
/* 优化卡片标题样式 */
:deep(.el-card__header) {
  color: #1f2937;
  font-weight: 600;
  border-bottom: 1px solid #e5e7eb;
  background: #f9fafb;
}

:deep(.el-card__body) {
  color: #374151;
}

/* 优化图表容器的背景 */
:deep(.echarts) {
  background: #ffffff;
  border-radius: 8px;
}

/* 统计数字样式优化 */
.text-20px {
  font-weight: 600;
  color: #1f2937;
}

.text-14px.text-gray-400 {
  color: #6b7280;
}

/* 功能模块图标样式 */
.text-16px {
  font-weight: 500;
  color: #374151;
}

/* 描述文字样式 */
.text-12px.text-gray-400 {
  color: #9ca3af;
}
</style>
